<template>
  <div class="page">
    <a-button @click="playAllVideos">播放所有视频</a-button>
    <div class="video-container">
      <div v-for="(video, index) in videos" :key="index" class="video-box">
        <video ref="videoRefs" controls v-bind="{ width: 160, height: 120 }"
          @loadedmetadata="handleLoadedMetadata(index)">
          <source :src="videoUrl" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <a-slider v-model:value="videoDurations[index]" :min="0" :max="videoDurations[index]"
          @change="seekVideo(index, $event)" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { Button, Slider } from 'ant-design-vue';

export default {
  name: 'App',
  components: {
    Button,
    Slider
  },
  setup() {
    const videoRefs = ref([]);
    const videoDurations = ref([]);
    const videoUrl = "https://files.jiandaoyun.com/a610ffb0-03cc-4542-b4e1-96e4375a8043?e=1719993599&token=bM7UwVPyBBdPaleBZt21SWKzMylqPUpn-05jZlas:_fgG8MWVuQOY-68lKY4VlSYRC-o=";
    const videos = ref([
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    ]);
    onMounted(() => {
      videoRefs.value.forEach((video, index) => {
        if (video) {
          video.addEventListener('loadedmetadata', () => {
            videoDurations.value[index] = video.duration;
          });
        }
      });
    });

    function playAllVideos() {
      Promise.allSettled(videoRefs.value.map(video => {
        if (video) {
          return video.play();
        }
        return Promise.resolve();
      }));
    }

    function handleLoadedMetadata(index) {
      // 视频加载元数据后，可以在这里处理其他逻辑
    }

    function seekVideo(index, currentTime) {
      const video = videoRefs.value[index];
      if (video) {
        video.currentTime = currentTime;
      }
    }

    return {
      videos,
      videoUrl,
      videoRefs,
      videoDurations,
      playAllVideos,
      handleLoadedMetadata,
      seekVideo,
    };
  },
};
</script>

<style>
.video-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap; 
}
.video-box {
  margin: 10px;
  /* 添加一些样式以提升用户体验 */
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}
</style>
